<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import PageCaontainer from '@/arco-components/PageContainer';
import MyDashboardCreate from './components/myDashboardCreate/index.vue';
import GetDashboardAuth from './components/getDashboardAuth/index.vue';
import * as RouteNames from '@/router/consts';

const router = useRouter();
const tabKey = ref('myCreate');
const loading = ref<boolean>(false);
// 点击新建看板
const createDashboard = () => {
  router.push({ name: RouteNames.ROUTER_METRICS_DASHBOARD_EDIT });
};
</script>

<template>
  <PageCaontainer>
    <template #extra>
      <a-button type="primary" @click="createDashboard">
        <template #icon> <IconPlus /> </template>新建看板</a-button
      >
    </template>
    <a-spin
      style="
        display: block;
        height: 100%;
        overflow-y: auto;
        background-color: #fff;
      "
      :loading="loading"
    >
      <div class="index-tree-card">
        <a-tabs v-model:active-key="tabKey" class="data-manage-tab">
          <a-tab-pane key="myCreate" title="我创建的"> </a-tab-pane>
          <a-tab-pane key="getAuth" title="获得授权的"> </a-tab-pane>
        </a-tabs>
        <div
          style="padding: 0; height: calc(100% - 60px)"
          class="index-tree-card-content"
        >
          <my-dashboard-create
            v-if="tabKey === 'myCreate'"
          ></my-dashboard-create>
          <get-dashboard-auth v-if="tabKey === 'getAuth'"></get-dashboard-auth>
        </div>
      </div>
    </a-spin>
  </PageCaontainer>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>

<style lang="scss">
.index-tree-card {
  .arco-tabs {
    .arco-tabs-nav-type-line .arco-tabs-tab-title:hover {
      color: #336eff !important;
    }
    .arco-tabs-nav-type-line .arco-tabs-tab-title::before {
      background-color: transparent !important;
    }
  }
}
</style>
